var SearchPanel = new Ext.panel.Panel({
	anchor: '100%',
	frame : true ,
	height: 60,
	bodyStyle: 'padding:10px;',
 	layout: {
     type:'hbox'
 	}, 			
		items:[
			{
				xtype:'textfield',
				height:30,
				name:'queryString',
				id:'querytextfield',
				style: 'margin-left:35px;',
				width:400,
					listeners : {
						specialKey : function(field, e) {
							if (e.getKey() == Ext.EventObject.ENTER) {
								onSearch();
								comName.selectText();
							}
						}
					}
			},
			{
				xtype: 'button',
				height:30,
				style: 'margin-left:15px;',
				text:'搜索',
				width:75,
				handler : onSearch
			},
			{				           
                xtype   : 'slider',
                style: 'margin-left:30px;margin-top:5px',
                value   : 50,
                width   : 200,
                listeners: {
	            change: {
	                buffer: 70,
	                fn    : filterData
	            }
        }
			}
		]
	}
);
		
var topContainer = new Ext.container.Container({
		layout: 'anchor',
		margin:'0 20 0 0',
		el:'topContainer',
		items:[loginContainer,SearchPanel]
	}
);

ImageModel = Ext.define('ImageModel', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'id'},
       {name: 'tags'},
       {name: 'path'},
       {name: 'nprank',type: 'int'},
       {name: 'prank', type: 'int'}
    ]
});

function getStore(){
	return Ext.create('Ext.data.Store', {
    autoLoad: true,
	model: 'ImageModel',
    data: photoData,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: ''
        }
    }
	});	
}

function getAjaxStore(){
	return Ext.create('Ext.data.Store', {
    autoLoad: true,
	model: 'ImageModel',
    proxy: {
        type: 'ajax',
        url : 'getPhotos.action?ajax=true&queryString='+query,
        reader: {
            type: 'json',
            root: ''
        }
    }
	});	
}

function getImageDataView(){
	imageDataView = Ext.create('Ext.DataView',{
		autoScroll :true,
		frame : true ,
	    store: getStore(),
			tpl:[
			    '<tpl for=".">',		    	
			        '<div class="thumb-wrap" id="{id}">',
			        '<div class="thumb"><img src="{path}"></div>',
			        '<span class="x-editable"></span></div>',
			    '</tpl>',
			    '<div class="x-clear"></div>'],
			itemSelector: 'div.thumb-wrap',
	    multiSelect: true,
	    trackOver: true,
			overItemCls: 'x-item-over',
			listeners: {
        itemdblclick: function(dataview, record, item, index, e) {
            getShowPhotoWindow(record).show();
        }
    	}
		
		});
		
	return imageDataView;
}

var ajaxStore;
var ajaxView ;
function getAajxImageDataView(){
	imageDataView = Ext.create('Ext.view.View',{
		autoScroll :true,
		frame : true ,
		store: ajaxStore,
			tpl:[
			    '<tpl for=".">',		    	
			        '<div class="thumb-wrap" id="{id}">',
			        '<div class="thumb"><img src="{path}"></div>',
			        '<span class="x-editable"></span></div>',
			    '</tpl>',
			    '<div class="x-clear"></div>'],
			itemSelector: 'div.thumb-wrap',
	    multiSelect: true,
		overItemCls: 'x-item-over',
		plugins : [
            Ext.create('Ext.ux.DataView.Animated', {
                duration  : 550,
                idProperty: 'id'
            })
        ],
		autoScroll  : true,	
		listeners: {
        	itemdblclick: function(dataview, record, item, index, e) {
            	getShowPhotoWindow(record).show();
        	}
    	}
		
		});
		
	return imageDataView;
}

function getShowPhotoWindow(record)
{
	var path = record.data.path;
	var tags = record.data.tags;
	
	//added by lirunsheng
	var pictureId = record.data.id;
	
	var FieldTag = Ext.form.FieldSet(
		{
			xtype: 'fieldset',
			title: '标签',
			html: tags,
			id:'FieldTag',
			columnWidth: 1
    }
	);
	
	var TextFieldNewTag = Ext.form.field.Text(
    {
        xtype: 'textfield',
        columnWidth: 0.3,
        id:'TextFieldNewTag'
    }		
	);
	
	var BtnAddtag = Ext.button.Button(
    {
        xtype: 'button',
        text: '添加标签',
        style:'margin-left:10px',
        columnWidth: 0.2,
        listeners: {
        		click: function() {
            	var newtag = Ext.getCmp('TextFieldNewTag').getValue();
            	if(newtag!=""){
            		Ext.Ajax.request({
					    url: 'addTagToPicture.action',
					    params: {
					       	picId:pictureId,
					       	tag:newtag
					    },
					    success: function(response){
					        var text = response.responseText;
					        // process server response here
					    }
					});
            		tags = tags + "  " +newtag;
            			Ext.getCmp('FieldTag').update(tags);
            	}            	
        	}
    		}
    }	
	);
	
	var BtnLike = Ext.button.Button(
    {
        xtype: 'button',
        text: '喜欢',
        style:'margin-left:10px',
        columnWidth: 0.2,
        listeners:{
    		click:function(){
    			Ext.Ajax.request({
    					url:'markLikePicture.action',
    					params:{
    						pictureId:pictureId
    					},
    					success: function(response){
					        var text = response.responseText;
					    }
    				}
    			);
    		}
        }
    }	
	);
	var BtnCollect = Ext.button.Button(
    {
        xtype: 'button',
        text: '收藏',
        style:'margin-left:10px',
        columnWidth: 0.2,
        listeners:{
    		click:function(){
    			Ext.Ajax.request({
    					url:'addPictureToAlbum.action',
    					params:{
    						pictureId:pictureId
    					},
    					success: function(response){
					        var text = response.responseText;
					    }
    				}
    			);
    		}
        }
    }	
	);
	
	var imagePanel = new Ext.Panel( {
		region :'center',
		margins :'5 5 5 5',
		layout: 'column',
		frame: true,
		html:'<img src="'+path+'"/>',
		items: [ FieldTag,
						 TextFieldNewTag,
						 BtnAddtag,
						 BtnLike,
						 BtnCollect
           ]
	});
	
	var showPhotoWindow = new Ext.Window( {
		title :'图片详情',
		layout :'fit',
		resizable :false,
		modal: true,
		items : [imagePanel]
	});
	return showPhotoWindow;
}

var grid = Ext.create('Ext.grid.Panel', {
    hideCollapseTool: true,
    store: getStore(),
    columnLines: true,
    height:100,
    autoScroll :true,
    columns: [
        {
            text     : 'tags',
            width    : 75,
            sortable : false,
            dataIndex: 'tags'
        },
        {
            text     : 'prank',
            width    : 75,
            sortable : true,
            dataIndex: 'prank'
        },
        {
            text     : 'nprank',
            width    : 75,
            sortable : true,
            dataIndex: 'nprank'
        }],
    title: '个性化指数',
    viewConfig: {
        stripeRows: true
    }
});

var guessUlike = Ext.create('Ext.Panel', {
    title: '猜你喜欢'
});

var hotRecom = Ext.create('Ext.Panel', {
    title: '热门推荐'
});
            
var recomPanel =  new Ext.Panel({
	region:'west',	
    margins:'5 0 5 5',
    collapsible: true,
    split:true,
    width: 220,
    height: 600,
    layout:'accordion',
    frame : true ,
    items: [guessUlike, hotRecom, grid]
   });


var imgdv = getImageDataView();
var	imagesPanel = new Ext.Panel({
	region:'center',
	id :'images-view',
	height: 1500,
    width : 1421,
    el : 'images-view',
    frame : true,
    layout :'fit',
    items:imgdv
});


var	bodyContainer = new Ext.container.Container({
	id :'bodyContainer',
	height: 600,
    width : 1421,
    frame : true ,
	el : 'bodyContainer',
	layout :'border'
});

if(islogin == true){
	bodyContainer.add(recomPanel);
	bodyContainer.add(imagesPanel);
}
else{
	bodyContainer.add(imagesPanel);
}

function filterData(slider) {
    var values  = slider.getValues();
    var test = [];
    ajaxStore.suspendEvents();
    ajaxStore.clearFilter();
    ajaxStore.resumeEvents();
    ajaxStore.filter([{
        fn: function(record) {
            return record.get('prank') >= values[0]/1000000000;
        }
    }]);

    ajaxStore.sort('prank', 'DESC');
    
}

function onSearch(){
	query = Ext.getCmp('querytextfield').getValue();
	if (query != ""){
		imagesPanel.removeAll();
		ajaxStore = getAjaxStore();
		ajaxView = getAajxImageDataView();
		imagesPanel.add(ajaxView);
		imagesPanel.doLayout();
		imagesPanel.render();
		
	}
}

function init() 
{
	Ext.getCmp('querytextfield').setValue(query);
	topContainer.render();
	bodyContainer.render();
}
  
Ext.onReady(init);